<template>
    <div class="time_cont">
        <!-- <div class="text">课程剩余时间：{{ learntime }} </div> -->
        <div class="dialog_box flex_center_center" v-if="isDialog1">
            <div class="detail_cont flex_center_center">
                <h2>温馨提示</h2>
                <img class="" src="@/assets/img/hint.png" alt="" srcset="">
                <p class="tips_text font20">  当前课程已结束，请进入学后检测提交课程学习成果！</p>
                <div class="btn_cont flex flex_center_center">
                    <!-- <el-button class="dialog_btn1 cur" @click="continueLearn">取消</el-button> -->
                    <el-button  class="dialog_btn cur" type="primary" @click="detectionFn">学后检测</el-button>
                </div>
            </div>
        </div>
        <div class="dialog_box flex_center_center" v-if="isDialog2">
            <div class="detail_cont flex_center_center">
                <h2>温馨提示</h2>
                <img class="" src="@/assets/img/hint.png" alt="" srcset="">
                <p class="tips_text font20">课程还有5分钟结束，请尽快提交学后检测！</p>
                <div class="btn_cont flex flex_center_center">
                    <el-button class="dialog_btn1 cur" @click="closeTipsPop">关闭</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            timeStr:{
                type:String,
                default:''
            }
        },
        data() {
            return {
                learnTimer:null,
                learntime:'',
                isDialog1: false,
                isDialog2: false,
                isShow: false,
            }
        },
        mounted(){
            this.timeFn()
        },
        destroyed(){
            clearInterval(this.learnTimer)
            this.learnTimer = null
        },
        methods:{
            detectionFn(){
                this.isDialog1 = false
                this.$emit('detection')
            },
            timeFn(){
                this.learnTimer = setInterval(() => {
                    let endDate = Date.parse(this.timeStr);
                    let date = new Date()
                    var startDate = Date.parse(date);
                    let newdate = endDate - startDate
                    this.learntime = this.formatDateTime(newdate)
                    
                    if(newdate <= 0){
                        clearInterval(this.learnTimer)
                        this.learnTimer = null
                        this.learntime = '00:00'
                        this.isDialog1 = true
                    }

                    //到结束前5分钟弹窗
                    if (newdate == 300000) {
                        this.isDialog2 = true
                    }
                }, 1000);
            },
            closeTipsPop() {
                this.isDialog2 = false
            },
            formatDateTime(value) { // 时间戳转换日期格式方法
                if (value == null) {
                    return ''
                } else {
                    const date = new Date(value)
                    let m = date.getMinutes()// 分
                    m = m < 10 ? ('0' + m) : m
                    let s = date.getSeconds()// 秒
                    s = s < 10 ? ('0' + s) : s
                    return m + ':' + s
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.time_cont{
    padding-right: 57.7rem;
    .text{
        font-size: 2.8rem;
        font-weight: normal;
        color: #D3D8F0;

    }
}
.dialog_box{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
    overflow: hidden;
    box-sizing: border-box;
 }
 .detail_cont{
  width: 40%;
  // height: 40vh;
  // background-color: #fff;
  background-image: url(@/assets/img/bj_1.png);
  // background-size: 100% 100%;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  padding: 2rem 9.2rem 4rem;
  h2{
    font-size: 3.6rem;
    margin-bottom: 2rem;
  }
  .tips_text{
    font-size: 3.2rem;
    padding: 2rem 0;

  }
.row_text{
    font-size: 3.2rem;
    margin: 5rem 0;
    .line{
        color: #B4B6BE;
        margin: 0 5.4rem;
        font-size: 2.2rem;
    }
}
  .btn_cont{
    width: 100%;
    .dialog_btn1{
        width: 50%;
        border-radius: 4px;
        text-align: center;
        border: 1px solid #019E69;
        color: #019E69;
        font-size: 2rem;
        margin-right: 2.4rem;
    }
    .dialog_btn{
        width: 50%;
        text-align: center;
        border-radius: 4px;
        color: #fff;
        font-size: 2rem;
    }
  }
    
  
 }
</style>